<script setup>
import {ref, onMounted} from "vue";
import api from '../api/category.js';


// 页面数据
const pageData = ref({
  records: [],
  total: 0,
  size: 10,
  current: 1,
  pages: 1
});

// 搜索文本
const searchText = ref('');

// 对话框控制
const addDialogVisible = ref(false);
const editDialogVisible = ref(false);
const deleteDialogVisible = ref(false);

// 表单对象
const addObj = ref({
 cname:'',
  pid:''
});

const editObj = ref({
  cid: '',
  cname: '',
  pid:''
});

const deleteObj = ref({
  cid: '',
  cname: ''
});

// 生命周期钩子
onMounted(() => {
  getTableList();
});

// 获取表格数据
const getTableList = async () => {
  const params = {
    current: pageData.value.current,
    size: pageData.value.size,
    searchtext: searchText.value || ''
  };

  try {
    const result = await api. getCategoryPage(params);
    pageData.value = result;
  } catch (error) {
    console.error("获取药品数据失败:", error);
  }
};

// 分页处理
const handleSizeChange = (size) => {
  pageData.value.size = size;
  pageData.value.current = 1;
  getTableList();
};

const handleCurrentChange = (current) => {
  pageData.value.current = current;
  getTableList();
};

// 搜索处理
const handleSearch = () => {
  pageData.value.current = 1;
  getTableList();
};

// 删除药品
const handleDelete = (row) => {
  deleteObj.value = {
    cid: row.cid,
    cname: row.cname
  };
  deleteDialogVisible.value = true;
};

const confirmDelete = async () => {
  try {
    await api.deleteCategory(deleteObj.value.cid);
    getTableList();
    deleteDialogVisible.value = false;
  } catch (error) {
    console.error("删除药品失败:", error);
  }
};

// 编辑药品
const handleEdit = (row) => {
  editDialogVisible.value = true;
  editObj.value = { ...row };
};

const handlerEditConfirm = async () => {
  try {
    // 将价格转换为分
    const submitData = {
      ...editObj.value
    };

    await api.editCategory(submitData);
    getTableList();
    editDialogVisible.value = false;
  } catch (error) {
    console.error("更新药品失败:", error);
  }
};

// 新增药品
const handlerAddConfirm = async () => {
  try {
    // 将价格转换为分
    const submitData = {
      ...addObj.value
    };

    await api.addCategory(submitData);
    getTableList();
    addDialogVisible.value = false;
    // 重置表单
    addObj.value = {
      cname: '',
     pid:''
    };
  } catch (error) {
    console.error("添加药品失败:", error);
  }
};

// 取消操作
const handlerAddCancel = () => {
  addDialogVisible.value = false;
  addObj.value = {
    cname: '',
    pid:''
  };
};

const handlerEditCancel = () => {
  editDialogVisible.value = false;
};
</script>

<template>
  <div class="drug-management">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">药品分类管理</h1>
      <p class="page-subtitle">管理系统中的药品分类信息</p>
    </div>

    <!-- 操作卡片：搜索和添加 -->
    <div class="global-card operation-card">
      <el-row :gutter="20" align="middle">
        <el-col :span="6">
          <el-input
              v-model="searchText"
              placeholder="搜索药品分类"
              clearable
              @clear="handleSearch"
          >
            <template #prefix>
              <el-icon class="search-icon"><Search /></el-icon>
            </template>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="handleSearch" class="action-button">
            <el-icon><Search /></el-icon> 查询
          </el-button>
        </el-col>
        <el-col :span="4" :offset="10">
          <el-button type="success" @click="addDialogVisible = true" class="action-button new-drug-button">
            <el-icon><Plus /></el-icon> 新增分类
          </el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 数据表格 -->
    <div class="data-card">
      <el-table :data="pageData.records" style="width: 100%">
        <el-table-column prop="cid" label="分类ID" width="120" />
        <el-table-column prop="cname" label="分类名称" />
        <el-table-column prop="pid" label="父分类ID" width="120" />

        <el-table-column label="操作" width="150" align="center">
          <template #default="scope">
            <el-button
                size="small"
                class="action-button edit-button"
                @click="handleEdit(scope.row)"
            >
              <el-icon><edit /></el-icon>
            </el-button>
            <el-button
                size="small"
                class="action-button delete-button"
                @click="handleDelete(scope.row)"
            >
              <el-icon><delete /></el-icon>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页组件 -->
    <div class="pagination-wrapper">
      <el-pagination
          class="custom-pagination"
          v-model:current-page="pageData.current"
          v-model:page-size="pageData.size"
          :page-sizes="[10, 20, 30, 50]"
          :total="pageData.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>

    <!-- 添加分类对话框 -->
    <el-dialog
        v-model="addDialogVisible"
        title="新增药品分类"
        width="500px"
        class="form-dialog"
    >
      <template #header>
        <div class="dialog-header">
          <el-icon><circle-plus /></el-icon>
          <span>新增药品分类</span>
        </div>
      </template>

      <el-form :model="addObj" label-width="100px" class="drug-form">
        <el-form-item label="分类名称" required>
          <el-input v-model="addObj.cname" placeholder="请输入分类名称" />
        </el-form-item>
        <el-form-item label="父分类ID">
          <el-input v-model="addObj.pid" placeholder="请输入父分类ID（可选）" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button class="cancel-button" @click="handlerAddCancel">取消</el-button>
        <el-button class="confirm-button" @click="handlerAddConfirm">确认添加</el-button>
      </template>
    </el-dialog>

    <!-- 编辑分类对话框 -->
    <el-dialog
        v-model="editDialogVisible"
        title="编辑药品分类"
        width="500px"
        class="form-dialog"
    >
      <template #header>
        <div class="dialog-header">
          <el-icon><edit /></el-icon>
          <span>编辑药品分类</span>
        </div>
      </template>

      <el-form :model="editObj" label-width="100px" class="drug-form">
        <el-form-item label="分类ID">
          <el-input v-model="editObj.cid" disabled />
        </el-form-item>
        <el-form-item label="分类名称" required>
          <el-input v-model="editObj.cname" placeholder="请输入分类名称" />
        </el-form-item>
        <el-form-item label="父分类ID">
          <el-input v-model="editObj.pid" placeholder="请输入父分类ID" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button class="cancel-button" @click="handlerEditCancel">取消</el-button>
        <el-button class="confirm-button" @click="handlerEditConfirm">确认修改</el-button>
      </template>
    </el-dialog>

    <!-- 删除确认对话框 -->
    <el-dialog
        v-model="deleteDialogVisible"
        title="删除药品分类"
        width="400px"
        class="delete-dialog"
    >
      <div class="dialog-content">
        <el-icon color="#e74c3c" :size="60" class="dialog-icon"><warning /></el-icon>
        <h3>确定要删除该分类吗？</h3>
        <p>分类名称：<strong>{{ deleteObj.cname }}</strong></p>
        <p class="warning-text">此操作不可撤销，请谨慎操作！</p>
      </div>

      <template #footer>
        <el-button class="cancel-button" @click="deleteDialogVisible = false">取消</el-button>
        <el-button class="confirm-delete-button" @click="confirmDelete">确认删除</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<style scoped>
.drug-management {
  padding: 20px;
  background-color: #f0f7ff;
  min-height: calc(100vh - 60px);
}

/* 页面标题样式 */
.page-header {
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #d1e5f9;
}

.page-title {
  color: #1a3b6d;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
}

.page-subtitle {
  color: #4a7bb9;
  font-size: 15px;
}

/* 卡片样式 */
.operation-card {
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
}

.data-card {
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
}

/* 按钮样式 */
.action-button {
  padding: 8px 15px;
  font-weight: 500;
  transition: all 0.3s;
  border-radius: 8px;
}

.action-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.new-drug-button {
  background: linear-gradient(135deg, #43a047, #66bb6a);
  border: none;
  color: white;
}

.new-drug-button:hover {
  background: linear-gradient(135deg, #388e3c, #4caf50);
}

.edit-button {
  background-color: #e3f2fd;
  border-color: #90caf9;
  color: #1565c0;
}

.delete-button {
  background-color: #ffebee;
  border-color: #ffcdd2;
  color: #a3c8f0;
}

/* 标签样式 */
.drug-tag {
  background-color: #e8f5e9;
  border-color: #c8e6c9;
  color: #2e7d32;
}

/* 分页样式 */
.pagination-wrapper {
  padding: 20px;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.custom-pagination {
  background: white;
  padding: 10px 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 对话框样式 */
.delete-dialog {
  border-radius: 10px;
  background: linear-gradient(to bottom, #ffffff, #f8fbff);
}

.dialog-content {
  text-align: center;
  padding: 20px;
}

.dialog-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.warning-text {
  color: #e74c3c;
  font-size: 14px;
  margin-top: 10px;
}

.form-dialog {
  border-radius: 12px;
  background: linear-gradient(to bottom, #ffffff, #f8fbff);
}

.dialog-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e1ecf7;
}

.dialog-header .el-icon {
  font-size: 24px;
  margin-right: 10px;
  color: #43a047;
}

.dialog-header span {
  font-size: 18px;
  font-weight: 600;
  color: #1a3b6d;
}

.drug-form {
  padding: 0 20px;
}

/* 按钮样式 */
.cancel-button {
  background-color: #f5f7fa;
  border-color: #e1ecf7;
  color: #5a7ea9;
}

.confirm-button {
  background: linear-gradient(135deg, #43a047, #66bb6a);
  border: none;
  color: white;
}

.confirm-button:hover {
  background: linear-gradient(135deg, #388e3c, #4caf50);
}

.confirm-delete-button {
  background: linear-gradient(135deg, #e53935, #d32f2f);
  border: none;
  color: white;
}

.confirm-delete-button:hover {
  background: linear-gradient(135deg, #d32f2f, #c62828);
}

/* 输入框样式 */
.search-icon {
  color: #43a047;
  font-size: 18px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .operation-card .el-row .el-col {
    margin-bottom: 10px;
  }

  .operation-card .el-col:last-child {
    margin-bottom: 0;
  }

  .new-drug-button {
    width: 100%;
  }
}
</style>